import { createRouter, createWebHistory } from "vue-router";

// import Home from '../views/Home.vue'
// import About from '../views/About.vue'
const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')
const Product = () => import("../views/Product.vue");
const vuexPage = () => import("../views/vuex.vue");
const userCenter = () => import('../views/user-center/index.vue')
const userProfile = () => import('../views/user-center/Profile.vue')
const userSettings = () => import('../views/user-center/Settings.vue')
//404
const NotFound=()=>import('../views/user-center/404.vue');

const CompositionApiPage = () => import("../views/composition-api/Index.vue")

const ElementTest=()=>import('../views/ElementText.vue')
const ListDemo=()=>import('../views/ListDemo.vue')
const Register=()=>import('../views/Register.vue')
const AccountList = () => import("../views/AccountList.vue")


const routes = [
    {
        path: '/',
        redirect: 'home'
    },
    {
        path: '/home',
        name: 'home',
        component: Home
    },
    {
        path:'/product/:id',
        name: 'product',
        component: Product
    },
    {
        path: '/about',
        name: 'about',
        component: About
    },
    {
        path: '/vuex',
        name: 'vuex',
        component: vuexPage
    },
    {
        path: '/composition-api',
        name: 'compositionApi',
        component: CompositionApiPage
    },
    {
        path: '/list-demo',
        name: 'listDemo',
        component: ListDemo
    },
    {
        path: '/element',
        name: 'element',
        component: ElementTest

    },
    {
        path: '/register',
        name: 'register',
        component: Register

    },
    {
        path: '/account-list',
        name: 'accountList',
        component: AccountList
    },
    {
        path: '/user',
        name: 'user',
        component: userCenter,
        redirect:'/user/profile',
        children:[
            {
                path:'profile',
                name:'profile',
                component:userProfile
            },
            {
                path:'settings',
                name:'settings',
                component:userSettings
            }
        ]
    },
    {
        path:'/:pathMatch(.*)*',
        name:'NotFound',
        component:NotFound
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes,
});
router.beforeEach((to,from,next)=>{
    console.log('to',to);
    console.log('from',from);
    next()
})

router.afterEach((to,from)=>{
    console.log('afterEach==========');
    console.log('to',to);
    console.log('from',from);
})

export default router